<script lang="ts" setup>
/**
 * 节点通用属性栏
 */
import { defineProps, ref } from 'vue'
import { Cell } from '@antv/x6'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  cell: Cell
}>()

const _cell = ref({ attrs: ObjectUtil.copy(props.cell.attrs) })

// 设置属性
function attrsHandle (key: string, val?: string) {
  // const value = val || ObjectUtil.getAttr(_cell.value.attrs, key, '/')
  props.cell.attr(key, val)
}
</script>

<template>
  <div class="attr-grid" style="grid-template-columns: repeat(2, 1fr);">
    <el-form-item label="边框颜色">
      <el-color-picker
        v-model="_cell.attrs.body.stroke" show-alpha
        @change="attrsHandle('body/stroke', $event)"
      />
    </el-form-item>
    <el-form-item label="边框宽度">
      <el-input-number v-model="_cell.attrs.body.strokeWidth" @change="attrsHandle('body/strokeWidth', $event)" />
    </el-form-item>
    <el-form-item label="填充颜色">
      <el-color-picker
        v-model="_cell.attrs.body.fill" show-alpha
        @change="attrsHandle('body/fill', $event)"
      />
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
</style>
